<template>
  <!-- 数据配置与样式配置 -->
  <div class="box">
    <el-scrollbar height="85vh">
      <div class="component">
        <!-- {{clickItem.cptOptionsName}} -->
        <component
          :is="optionsComponents[`${clickItem.cptOptionsName}`]"
        ></component>
      </div>
    </el-scrollbar>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import optionsComponents from '@/util/registerMaterialOptionsCom'
import dataOptionsComponents from '@/util/registerDataOptions'
import type { TabsPaneContext } from 'element-plus'
import { useSelectMaterialStore } from '@/store/resume.ts'
import { useResumeJsonStore } from '@/store/resume'
import $bus from '@/bus/index.ts'
const useSelectMaterial = useSelectMaterialStore()
let userResumeStore = useResumeJsonStore()
const clickItem = ref('')
//接收点击模块的数据
onMounted(() => {
  $bus.on('data', (val) => {
    clickItem.value = val
    // console.log(clickItem.value)
    useSelectMaterial.updateSelectMaterial(
      val.cptName,
      val.cptOptionsName,
      val.cptTitle,
      val.keyId,
    )
  })
})
</script>
<style lang="scss" scoped>
.el-tabs {
  --el-tabs-header-height: 50px;
}

:v-deep(.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active) {
  color: #00c091;
}
</style>
